<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/slide-unlock.css" />
    <link rel="stylesheet" href="css/sweetalert.css">
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="header_login flex">
      <div class="left"><img src="images/goback.png" alt="" /></div>
      <div class="center">找回密码</div>
      <div class="right">登录</div>
    </div>
    <div class="registerbox">
      <div class="input_box flex">
        <!-- <div class="title">用户名</div> -->
        <div class="input">
          <input type="text" id="phone" placeholder="请输入手机号" />
        </div>
      </div>
      
        <div id="slider">
          <div id="slider_bg"></div>
          <span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
        </div>
        <button class="login_btn btn_gray">发送手机号</button>
      
    </div>
  </body>
  <script src="js/jquery-1.12.0.min.js"></script>
  <script src="js/public.js"></script>
  <script src="js/jquery.slideunlock.js"></script>
  <script src="js/sweetalert.min.js"></script>
  <script>
      $(function () {
    var slider = new SliderUnlock("#slider",{
			successLabelTip : "验证成功"	
		},function(){
            let re=isPhoneNo($(" #phone ").val())
           if(re){
               $(".login_btn").removeClass("btn_gray")
           }else{
            swal("OMG!", "手机号格式不正确", "error");
               //以下四行设置恢复初始，不需要可以删除
               setTimeout(function(){
                   $("#labelTip").html("拖动滑块验证");
                   $("#labelTip").css("color","white");
                   },2000);
               slider.init();
           }
		});
    slider.init();
})
  </script>
</html>
